<template>
  <Layout>
    <div class="support">
      <SupportBanner :bannerImg="bannerImg" :title="title"/>
      <a-tabs class="tab" default-active-key="1">
        <a-tab-pane key="1" tab="Company">
          <div class="content">
            <CompanyCom />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="New">
          <div class="content">
            <NewList />
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Team">
          <div class="content">
            <TeamCom />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="Partners">
          <div class="content">
            <PartnersCom />
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="Careers">
          <div class="content">
            <CareersList />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </Layout>
</template>

<script>
import Layout from '/@/components/layout/Layout.vue'
import SupportBanner from '/@/components/SupportBanner.vue'
import CompanyCom from '../components/about/CompanyCom.vue'
import NewList from '../components/about/NewList.vue'
import TeamCom from "/@/components/about/TeamCom.vue";
import PartnersCom from "/@/components/about/PartnersCom.vue";
import CareersList from "/@/components/about/CareersList.vue";
import aboutImg from "../assets/images/about/5.1 about.jpg"
export default {
  name: 'About',
  components:{Layout,SupportBanner, CompanyCom, TeamCom, NewList, PartnersCom, CareersList},
  setup(){
    const bannerImg = aboutImg
    const title = "About"
    return {
      bannerImg,
      title,
    }
  }
}
</script>

<style lang="scss" scoped>
.support {
  background:#d3d3d3;
  ::v-deep .ant-tabs-nav-wrap{
    text-align: center;
    background-color:#1d1d1b;
    .ant-tabs-nav{
      .ant-tabs-tab{
        color:white;
      }
    }
  }
  .content{
    margin:0 auto;
    width:70vw;
  }
}
</style>

